<script setup>
import {h, ref} from "vue";
import {useSysDictMutations} from "@/composables/sys/dict.js";
import {NButton, NSpace, useMessage} from "naive-ui";
import {renderIcon} from "@/utils/index.js";
import {AddOutline} from "@vicons/ionicons5";
import {usePermission} from "@/composables/use-permission.js";
import ConfirmButton from "@/components/confirm-button/index.vue";

const {hasPermission} = usePermission()

const emits = defineEmits([
  'on-add', 'on-edit', 'update:page', 'update:page-size'
])

const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  isLoading: {
    type: Boolean,
    default: false
  },
  page: {
    type: Number,
    required: true
  },
  size: {
    type: Number,
    required: true
  },
  total: {
    type: Number,
    required: true
  }
})

const checkedRowKeys = ref([])
const message = useMessage()
const sysDictMutations = useSysDictMutations()

const columns = [
  {
    type: 'selection',
    width: 60
  },
  {
    title: '字典名称',
    key: 'name',
    align: 'center',
  },
  {
    title: '字典编码',
    key: 'code',
    align: 'center',
  },
  {
    title: '字典描述',
    key: 'description',
    align: 'center',
  },
  {
    title: '排序号',
    key: 'sort',
    align: 'center',
    width: 80
  },
  {
    title: '操作',
    key: 'actions',
    align: 'center',
    width: 200,
    render(row) {
      return h(
          NSpace,
          {
            justify: 'center',
            align: 'center',
            size: 'small'
          },
          {
            default: () => [
              hasPermission('delete') ?
                  h(ConfirmButton,
                      {
                        text: '删除',
                        type: 'error',
                        size: 'tiny',
                        quaternary: true,
                        onPositiveClick: async () => {
                          try {
                            await sysDictMutations.deleteById.mutateAsync(row.id)
                            message.success('删除成功')
                          } catch (e) {
                            console.error(e)
                          }
                        }
                      }
                  ) : null,
              hasPermission('update') ?
                  h(NButton, {
                    type: 'primary',
                    size: 'tiny',
                    quaternary: true,
                    onClick: () => emits('on-edit', row.id)
                  }, {default: () => '编辑'}) : null
            ]
          }
      )
    }
  }
]

// 批量删除
const handleBatchDelete = async () => {
  try {
    await sysDictMutations.deleteBatch.mutateAsync(checkedRowKeys.value)
    message.success('批量删除成功')
    checkedRowKeys.value = []
  } catch (e) {
    console.error(e)
  }
}

// 分页变化
const handlePageChange = (page) => {
  emits('update:page', page)
}

// 每页数量变化
const handleSizeChange = (size) => {
  emits('update:page-size', size)
}
</script>

<template>
  <n-space vertical>
    <n-space reverse>
      <n-button
          v-if="hasPermission('create')"
          type="primary"
          size="small"
          :render-icon="renderIcon(AddOutline)"
          @click="$emit('on-add')">
        <span>新增</span>
      </n-button>
      <confirm-button
          v-if="hasPermission('delete')"
          text="批量删除"
          type="error"
          size="small"
          :disabled="checkedRowKeys.length === 0"
          @positive-click="handleBatchDelete"
      />
    </n-space>
    <div class="flex-1 overflow-hidden">
      <n-data-table
          ref="table"
          remote
          v-model:checked-row-keys="checkedRowKeys"
          :loading="isLoading"
          :row-key="(row) => row.id"
          :columns="columns"
          :data="data"
          :pagination="{
            page: page,
            pageSize: size,
            itemCount: total,
            showSizePicker: true,
            pageSizes: [10, 20, 50]
          }"
          @update:page="handlePageChange"
          @update:page-size="handleSizeChange"
      />
    </div>
  </n-space>
</template>

<style scoped>

</style>